<template>
  <div>
    <!-- 左对齐 -->
    <div class="box_head">
     <list-title>音乐榜单</list-title>
      <span  @click="totop"><small>更多</small><van-icon name="arrow" size="16" /></span>
    </div>
    <van-row type="flex" class="box">
      <van-col
        span="6"
        v-for="(item, index, id) in top"
        :key="id"
        v-show="index < 12"
        @click="toDetail(item.id)"
      >
        <span>
          <van-image
            width="80"
            height="80"
            lazy-load
            :src="item.coverImgUrl + '?param=120y120'"
          />
        </span>
        <span class="van-ellipsis">{{ item.name }}</span>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import ListTitle from "@/components/video/ListTitle";
export default {
  name: "MusicRecomenRankin",
  props: ["top"],

  data() {
    return {};
  },
components:{ListTitle },
  mounted() {},

  methods: {
    toDetail(id) {
      this.$router.push({
        path: "/MusicDetail",
        query: { id },
      });
    },
    totop() {
      this.$router.push("/MusicRanking");
    },
  },
};
</script>

<style lang="less" scoped>
.box_head {
  height: 1.5625rem;
  line-height: 1.5625rem;
  padding: 0.3125rem 0rem;
  font-size: 1rem;
  display: flex;
   background: url(../../static/img/wrap.jpg) repeat-x 0 0; /* 添加图文列表整体的背景图片 */
  justify-content: space-between;
  h3 {
    font-weight: bold;
    font-size: 1.125rem;
  }
}
.box {
  .van-col {
    display: flex;
    flex-direction: column;
    padding: 0.3125rem;
  }
}
</style>